<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myBorderBottom">
      <el-col :span="7" class="myTitleText myLineHeight_40px">{{title}}</el-col>
      <el-col :span="17" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="addClassification=true">新增</el-button>
        <!-- <el-button type="primary" class="myBgGreen">导入</el-button> -->
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="4">
        <el-input placeholder="编号" v-model="id">
          <template slot="prepend">编号</template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="名称" v-model="name">
          <template slot="prepend">名称</template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="年限(月)" v-model="years">
          <template slot="prepend">年限(月)</template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="父编号" v-model="fatherId">
          <template slot="prepend">父编号</template>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" class="myBgGreen" :disabled="isabled" @click="onseva">保存</el-button>
        <!-- <el-button type="primary" class="myBgGreen" @click="ondelete">删除</el-button> -->
        <el-popover
          ref="popover1"
          placement="bottom"
          width="160"
          v-model="novisible">
          <p>确定要禁用选中的分类吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="novisible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="onno">确定</el-button>
          </div>
        </el-popover>     
        <el-button type="primary" class="myBgGreen" :disabled="isabled" v-popover:popover1>禁用</el-button>
      </el-col>
    </el-row>
    <!-- 页面主体 start -->
    <el-row class="myPaddingTop_10px">
      <!-- 主体列表树 start -->
      <el-col :span="24">
        <el-tree 
          class="asset"
          :data="deptTree" 
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent" 
          @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <!-- 主体列表树 end -->
    </el-row>
    <!-- 页面主体 end -->

    <el-dialog title="新增分类" class="myRoleDialog" :visible.sync="addClassification">
      <el-row :gutter="10">
        <el-col :span="5" class="myLeftMsg">分类名称:</el-col>
        <el-col :span="19">
          <el-input placeholder="分类名称" v-model="cate_name"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="myPaddingTop_10px">
        <el-col :span="5" class="myLeftMsg">分类编号:</el-col>
        <el-col :span="19">
          <el-input placeholder="分类编号" v-model="code"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="myPaddingTop_10px">
        <el-col :span="5" class="myLeftMsg">使用年限:</el-col>
        <el-col :span="19">
          <el-input placeholder="使用年限(月)" v-model="year_limit"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="myPaddingTop_10px">
        <el-col :span="5" class="myLeftMsg">分类级别:</el-col>
        <el-col :span="19">
          <template>
            <el-select v-model="is_same_level" placeholder="请选择分类级别">
              <el-option
                v-for="item in classOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sub">提 交</el-button>
        <el-button @click="addClassification = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>     
  
<style scoped>
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .treeContainer{
    height: 670px;
    overflow-y: scroll; 
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
  }
</style>

<script>
  import DeptSubMenu from '@/components/DeptSubMenu';
  import { getAssetsClassList , addAssetsClass , updateAssetsClass , noAssetsClass , deleteAssetsClass } from '@/api/assets';
  export default {
    data(){
      return{
        title:"资产分类管理",
        id:'',
        name:'',
        years:'',
        fatherId:'',

        deptTree: [],
        deptIdSelected: "0",
        menuLoading: false,
        deptName: "",

        addClassification:false,
        classOptions:[
          {label:"同级分类",value:"1"},
          {label:"下级分类",value:"0"}
        ],
        is_same_level:'',
        cate_name:"",
        code:"",
        year_limit:"",
        cate_id:"",
        cate_level:"",
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        novisible:false,
        isabled:true,

      }
    },
    components: {
        DeptSubMenu
    },
    created(){
      document.title=this.title;
      this.ongetAssetsClassList();
    },
    watch: {
      
    },
    methods:{
      ongetAssetsClassList(){//拉取资产分类树
        getAssetsClassList().then(response => {
          let res=response.data;
          this.deptTree=res;
        }).catch(error => {
          this.$message.error("拉取分类列表失败！" + error.response.data.error_msg);
        })
      },
      sub(){
        let vm=this;
        if(!vm.cate_name || !vm.code || !vm.year_limit || !vm.is_same_level){
          vm.$message.info("请将数据填写完整！");
          return;
        }
        let params={
          cate_id:vm.cate_id,
          cate_level:vm.cate_level,
          cate_name:vm.cate_name,
          code:vm.code,
          year_limit:vm.year_limit,
          is_same_level:vm.is_same_level
        }
        addAssetsClass(params).then(response => {
          let res=response.data;
          vm.addClassification=false;
          vm.$message.success("执行成功！");
          vm.ongetAssetsClassList();
          vm.cate_name="";
          vm.code="";
          vm.year_limit="";
          vm.is_same_level="";
        }).catch(error => {
          vm.$message.error("执行失败！" + error.response.data.error_msg);
        })
      },
      onseva(){
        let vm=this;
        if(!vm.cate_id){
          vm.$message.info("请先选中需要操作的分类！");
          return;
        }
        if(vm.id==="" || vm.name==="" || vm.years==="" || vm.fatherId===""){
          vm.$message.info("请将数据填写完整！");
          return;
        }
        let params={
          "code": vm.id,
          "pcode": vm.fatherId,
          "cate_name": vm.name,
          "year_limit": vm.years
        }
        updateAssetsClass(vm.cate_id,params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.ongetAssetsClassList();
        }).catch(error => {
          vm.$message.error("执行失败！" + error.response.data.error_msg);
        })
      },
      onno(){
        let vm=this;
        if(!vm.cate_id){
          vm.$message.info("请先选中需要操作的分类！");
          return;
        }
        noAssetsClass(vm.cate_id).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.ongetAssetsClassList();
          vm.novisible=false;
        }).catch(error => {
          vm.novisible=false;
          vm.$message.error("执行失败！" + error.response.data.error_msg);
        })
      },
      ondelete(){
        let vm=this;
        if(!vm.cate_id){
          vm.$message.info("请先选中需要操作的分类！");
          return;
        }
        deleteAssetsClass(vm.cate_id).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.ongetAssetsClassList();
          console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          console.log(error)
        })
      },
      handleNodeClick(data) {
        this.id=data.code;
        this.name=data.label;
        this.years=data.year_limit;
        this.fatherId=data.pCode;

        this.cate_id=data.cate_id;
        this.cate_level=data.cate_level;
        this.isabled=false;
      },
      renderContent:function(createElement, { node, data, store }) {
        return createElement(
          'div', 
          {},
          [
            createElement('span', `【 ${data.code} 】 - ${data.label}`)
          ]
        );
      },
      
  }
}
</script>

